<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../../../assets/lib/font-awesome/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="../../../assets/lib/iview/css/iview.css">
    <link rel="stylesheet" href="../../../assets/lib/element-ui/css/element.css">
    <link rel="stylesheet" href="../../../assets/css/animate.css">
    <link rel="stylesheet" href="../../../assets/css/ideawall.css">
    <link rel="stylesheet" href="../../../assets/css/control.css">
    <link rel="stylesheet" href="../../../assets/css/control-mydesk.css">
</head>
<body>
<div id="app" v-cloak v-loading="loading">
    <div style="display:flex;height:100%;width:100%;">
        <div class="zxx-desk-list-container">
            <div id="my-device">
                <h3 class="zxx-desk-m-title animated fadeInLeftBig">
                    我的设备
                    <el-tooltip placement="top" data-zxx-map="teach" data-tooltip-limit="onlyonline"
                                :popper-class="window.navigator.onLine?'popper-tooltip popper-only-online':'popper-tooltip'">
                        <div slot="content">
                            1. 我们将定时抓取你的设备监视器快照(在尽可能低能耗的情况下), <br/>以便能实时反馈桌面配置预览情况.<br/>
                            2. 你可以在偏好设置中修改快照时间或关闭快照功能.<br/>
                            3. 如果你为某设备启用了桌面, 你可以在这里通过面板按钮或右键<br/>选项对设备桌面进行管理(播放/暂停, 静音等)
                        </div>
                        <el-button type="text" icon="el-icon-question"></el-button>
                    </el-tooltip>
                </h3>
                <div v-loading="loadingDevices" class="zxx-device-loading"
                     :element-loading-text="firstTime?'正在抓取监视器组快照...':'正在刷新监视器组快照...'"
                     element-loading-spinner="el-icon-loading" style="min-height: 170px;">
                    <div :class="'zxx-desk-con zxx-device ' + deviceAni"
                         v-for="(item, index) in displays"
                         :data-id="item.display_id">
                        <el-card :shadow="item.is_set_desk?'always':'hover'">
                            <div class="zxx-desk-panel zxx-desk-bg"
                                 :onclick="'vm.configDesk(\''+item.is_set_desk+'\')'">
                                <div class="zxx-desk-overlay zxx-desk-bg zxx-overlay zxx-desk-overlay-top zxx-menu-listener"
                                     :data-id="item.display_id"
                                     zxx-menu="buildDisplayContextMenu"
                                     v-show="item.is_set_desk">
                                </div>
                                <div class="zxx-desk-overlay zxx-desk-bg zxx-overlay animated fadeIn"
                                     v-if="item.is_set_desk"></div>
                                <div class="zxx-desk-overlay zxx-desk-bg zxx-overlay-nofilter animated fadeIn"
                                     v-if="item.is_set_desk">
                                <span class="zxx-desk-overlay-control animated fadeIn">
                                    <i class="fa fa-cogs"></i>
                                </span>
                                </div>
                                <div class="zxx-desk-tooltip zxx-desk-bg zxx-overlay-nofilter animated fadeIn"
                                     style="z-index:999;display:block;">
                                <span class="zxx-desk-tooltip-edit animated fadeInUp"
                                      v-if="item.is_set_desk === ld.id">
                                </span>
                                    <span class="zxx-desk-tooltip-edit animated fadeInUp"
                                          v-if="item.is_set_desk === ld.id"
                                          style="background: transparent;z-index:521;">
                                    <i class="el-icon-edit"></i> 正在配置...
                                </span>
                                    <span class="zxx-desk-tooltip-control animated fadeInRight"
                                          v-if="item.is_set_desk">
                                    <i class="el-icon-s-claim"></i>
                                </span>
                                    <span class="zxx-desk-tooltip-right animated fadeInRight"
                                          v-if="!item.displays_has_screen">
                                    <i class="el-icon-loading"></i>
                                </span>
                                </div>
                                <img :id="'zxx-desk-device-'+item.display_id" :src="item.stream" alt=""
                                     class="iframe_wall"/>
                            </div>
                            <div style="padding: 5px;">
                                <div class="zxx-desk-info-name">
                                    <span>{{item.title}}</span>
                                    <span>{{item.display_rp}}</span>
                                </div>
                                <span class="zxx-desk-info-type" style="margin-right:0;">
                                    <a href="javascript:void(0)"
                                       style="color: #666;cursor: pointer;font-size: 14px;margin: 0 1px;"
                                       v-if="loadingControl && !item.is_set_desk">
                                        <i class="el-icon-loading"></i>
                                    </a>
                                    <a :id="'zxx-set-pause-'+item.display_id" href="javascript:void(0)" title="点击暂停"
                                       class="zxx-device-wall-setpause"
                                       v-show="!loadingControl && item.is_set_desk"
                                       style="color: #666;cursor: pointer;font-size: 14px;margin: 0 1px;"
                                       :onclick="'vm.setPause(this, \''+item.display_id+'\')'" data-switch="1">
                                        <i class="ivu-icon ivu-icon-md-pause"></i>
                                    </a>
                                    <a :id="'zxx-set-muted-'+item.display_id" href="javascript:void(0)" title="点击静音"
                                       class="zxx-device-wall-setmuted"
                                       v-show="!loadingControl && item.is_set_desk"
                                       style="color: #666;cursor: pointer;font-size: 14px;margin: 0 1px;"
                                       :onclick="'vm.setMuted(this, \''+item.display_id+'\')'" data-switch="1">
                                        <i class="ivu-icon ivu-icon-md-volume-up"></i>
                                    </a>
                                </span>
                            </div>
                        </el-card>
                    </div>
                    <div class="clearfix"></div>
                </div>
            </div>

            <div id="my-desktop">
                <h3 class="zxx-desk-m-title animated fadeInLeftBig">
                    我的桌面
                    <el-tooltip placement="top" data-zxx-map="teach" data-tooltip-limit="onlyonline"
                                :popper-class="window.navigator.onLine?'popper-tooltip popper-only-online':'popper-tooltip'">
                        <div slot="content">
                            这些是你本地的桌面项资源, 你可以: <br/>
                            1. 点击桌面项以配置它们, 桌面预览图下方会实时显示你正在配置中的桌面, <br/>并且, 如果有设备启用了它, 设备也将显示"正在配置"信息;<br/>
                            2. 右键桌面项, 你可以预览/设置启用/删除 它们;
                        </div>
                        <el-button type="text" icon="el-icon-question"></el-button>
                    </el-tooltip>
                    <div style="float:right;">
                        <el-dropdown size="mini" trigger="click" @command="handleDesktopCommand">
                          <span class="el-dropdown-link">
                              <span id="zxx-desktop-nowc">{{tag.label}}</span>
                              <i class="el-icon-arrow-down el-icon--right"></i>
                          </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item v-for="(item, index) in tags" :icon="item.icon" :command="item.id"
                                                  :tabindex="(index+1)"> {{ item.label }}
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                </h3>
                <div v-loading="loadingDesks" class="zxx-desk-loading"
                     element-loading-text="正在获取本地桌面组数据..."
                     element-loading-spinner="el-icon-loading" style="min-height: 170px;">
                    <div class="zxx-desk-con zxx-desktop animated fadeInLeftBig" v-for="(item, index) in lds"
                         v-show="item.type === tag.id || tag.id === 'all'">
                        <el-card :shadow="(item.setsdisplays && item.setsdisplays.length > 0)?'always':'hover'">
                            <div class="zxx-desk-panel zxx-desk-bg"
                                 :data-link-type="item.source_type"
                                 :data-link="item.source_val"
                                 :onclick="'vm.configDesk(\''+item.id+'\', \''+index+'\')'">
                                <div class="zxx-desk-overlay zxx-desk-bg zxx-overlay zxx-desk-overlay-top zxx-menu-listener"
                                     :data-id="item.id"
                                     zxx-menu="buildDeskContextMenu">
                                </div>
                                <div class="zxx-desk-overlay zxx-desk-bg zxx-overlay animated fadeIn"></div>
                                <div class="zxx-desk-overlay zxx-desk-bg zxx-overlay-nofilter animated fadeIn">
                                <span class="zxx-desk-overlay-control animated fadeIn">
                                    <i class="fa fa-cogs"></i>
                                </span>
                                </div>
                                <div class="zxx-desk-tooltip zxx-desk-bg zxx-overlay-nofilter animated fadeIn"
                                     style="z-index:999;display:block;overflow-y: auto;">
                                    <span class="zxx-desk-tooltip-edit animated fadeInUp" v-if="item.id === ld.id">
                                    </span>
                                    <span class="zxx-desk-tooltip-edit animated fadeInUp" v-if="item.id === ld.id"
                                          style="background: transparent;z-index:521;">
                                        <i class="el-icon-edit"></i> 正在配置...
                                    </span>
                                    <span class="zxx-desk-tooltip-control2 animated fadeIn"
                                          v-for="(disp, inde) in item.setsdisplays"
                                          v-if="(item.setsdisplays && item.setsdisplays.length > 0) && (displayIds && displayIds.join(',').indexOf(disp.display_id+'') > -1)"
                                          :style="'top:'+(inde*25)+'px;'">
                                        {{disp.screen_title}}
                                    </span>
                                    <span class="zxx-desk-tooltip-left animated fadeInLeft"
                                          v-if="item.init_sign == 1 || ((item.type !== 'page' && item.medias.length <= 0) || (item.type === 'page' && item.source_val === ''))">
                                        <i class="el-icon-magic-stick"></i>
                                    </span>
                                </div>
                                <img :src="item.preview" alt=""
                                     class="iframe_wall zxx-desk-showpanel"/>
                            </div>
                            <div class="zxx-deskx-r-panel" style="padding: 5px;">
                                <div class="zxx-desk-info-name">{{item.name}}</div>
                                <span class="zxx-desk-info-type">
                                    <el-tag size="mini" :type="item.typeExplain.style">
                                        {{ item.typeExplain.name }}
                                    </el-tag>
                                </span>
                            </div>
                        </el-card>
                    </div>
                    <div class="clearfix"></div>
                </div>
            </div>
            <el-backtop target=".zxx-desk-list-container" visibility-height="20" right="330" bottom="30"></el-backtop>
        </div>
        <div class="zxx-desk-info-container animated fadeInRightBig">
            <el-tabs v-model="deskInfoTab" :stretch="false" @tab-click="handleInfoTabClick">
                <el-tab-pane label="媒体配置" name="config" style="background: #fff;">
                    <iframe class="iframe_wall iframe_wall_config animated fadeIn" id="iframe_config" name="iframe_config"
                            data-key="config" width="100%" :style="deskInfoTab!='config'?'visibility:hidden;':'visibility:visible;'"
                            data-nopreload="true"
                            :data-src="proxy.link('./mydesk/MediaConfig.html?fk=[ID]')" frameborder="0"
                            scrolling="no"></iframe>
                </el-tab-pane>
                <el-tab-pane label="高级配置" name="highconfig" style="background: #fff;">
                    <iframe class="iframe_wall iframe_wall_config animated fadeIn" id="iframe_highconfig" name="iframe_highconfig"
                            data-key="highconfig" :style="deskInfoTab!='highconfig'?'visibility:hidden;':'visibility:visible;'"
                            width="100%" data-nopreload="true"
                            :data-src="proxy.link('./mydesk/HighConfig.html?fk=[ID]')" frameborder="0"
                            scrolling="no"></iframe>
                </el-tab-pane>
                <el-tab-pane label="用户点评" name="comment" style="background: #fff;">
                    <iframe class="iframe_wall iframe_wall_config animated fadeIn" id="iframe_comment" name="iframe_comment"
                            data-key="comment" :style="deskInfoTab!='comment'?'visibility:hidden;':'visibility:visible;'"
                            width="100%" data-nopreload="true"
                            data-lazyload="true"
                            :data-src="proxy.link('./mydesk/Comment.html?fk=[ID]')" frameborder="0"
                            scrolling="no"></iframe>
                </el-tab-pane>
                <el-tab-pane label="详细信息" name="info" style="background: #fff;">
                    <iframe class="iframe_wall iframe_wall_config animated fadeIn" id="iframe_info" name="iframe_info" data-key="info"
                            width="100%" :style="deskInfoTab!='info'?'visibility:hidden;':'visibility:visible;'"
                            data-nopreload="true"
                            :data-src="proxy.link('./mydesk/Info.html?fk=[ID]')" frameborder="0"
                            scrolling="no"></iframe>
                </el-tab-pane>
            </el-tabs>
            <div class="zxx-desk-info-container-loading" v-loading="loadingDeskConfig"></div>
        </div>
    </div>
</div>
</body>
<script src="../../../core/Proxy.js"></script>
<script src="../../../assets/js/jquery.min.js"></script>
<script src="../../../assets/js/vue.min.js"></script>
<script src="../../../assets/lib/iview/js/iview.min.js"></script>
<script src="../../../assets/lib/element-ui/js/element.min.js"></script>
<script src="../../../util/AvatarUtil.js"></script>
<script src="../../../controller/MyDeskController.js"></script>
<script src="../../../assets/js/zxx.min.js"></script>
</html>